<template>
  <div id="search">
    <h3>搜索结果</h3>
    <p>为您查到  {{articalMes.totalCount}} 条搜索结果</p>
    
    <div id="blog">
      <my-article class="article" 
        v-for = "(item,index) in articalMes.list" 
        :key="index"
        :content="item"></my-article>
    </div>

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="params.page"
      :page-sizes="[1, 2, 3, 4]"
      :page-size="params.limit"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>      
  </div>
</template>

<script>
  import myArticle from '@/components/front/home/article.vue'
  export default {
  components: {
    myArticle,
  },
  data(){
    return{
      key:'',//搜索内容
      params:{ //分页请求参数
          page:1,
          limit:1
      },  
      articalMes:{}, //查询到的文章信息   
      total:0
    }
  },
  created(){
  },
  mounted(){
    if(this.$route.query.key){
      this.key = this.$route.query.key
      this.getArticalMessage()
    }
  },
  watch:{
    $route(newValue){
      this.key = this.$route.query.key
      this.getArticalMessage()
    }
  },
  methods:{
    async getArticalMessage(){
      const {data:res} = await this.$http.get("/blog/blogs/list",{
        params:{
          key:this.key,
          page:this.params.page,
          limit:this.params.limit
        }
      })
      console.log(res)
      this.articalMes = res.page
      this.total = res.page.totalCount
    },
    //分页修改
    handleSizeChange(val) {
      this.params.limit = val
      this.getArticalMessage()
    },
    handleCurrentChange(val) {
      this.params.page = val
      this.getArticalMessage()
    },
  }
  }
</script>

<style scoped>
  #blog{
    width:100%;
  }
  .article{
    width:80%;
    height:350px;
    margin-top:28px;
    position:relative;
    left:50%;
    transform:translateX(-50%);
  }
  .noContent{
    width:100%;
    margin:100px;
    height:800px;
    font-size:20px;
  }
  .el-pagination{
    margin: 50px auto;
    text-align: center;    
  }
</style>